import { FC, useState, useRef, useEffect } from "react";

// 引入资源
import Logo from '@/assets/Nav/logo.png'
import styles from './styles.module.scss'
import classNames from "classnames";
import { Input } from 'antd';
import { ShoppingCartOutlined } from "@ant-design/icons";
import { useNavigate, useSearchParams } from "react-router-dom";
// 引入类型
import { child, NavListType } from "../../api/Banner/type";
import { reqSearch } from "../../api/Banner";

interface Props {
    NavList: NavListType[]
}

const Nav: FC<Props> = (props) => {

    const { NavList } = props


    const { Search } = Input;

    const [isShow, setIsShow] = useState(false)
    const [children1Show, setChildren1Show] = useState(false)
    const [children2Show, setChildren2Show] = useState(false)
    const [ChildrenList, setChildrenList] = useState<child[]>()


    // 获取传过来的id
    const [searchParams] = useSearchParams();
    const id = searchParams.get('id');

    // 路由跳转
    const Navigate = useNavigate()

    // 跳转分类
    const goCategory = (id: string) => {
        Navigate(`/category?id=${id}`, {
            replace: false,
        })
    }

    // 跳转首页
    const goHome = () => {
        Navigate(`/home`, {
            replace: false,
        })
    }

    // 跳转二级分类
    const goToCategorySub = (id: string) => {
        Navigate(`/category/sub?id=${id}`, {
            replace: false
        })
    }



    // 监听滚动事件
    const nav = useRef<HTMLDivElement>(null);
    const onScroll = () => {

        if (nav.current) {
            const { top } = nav.current.getBoundingClientRect()
            if (top <= 0) {
                setIsShow(true)

            }
            else {
                setIsShow(false)
            }
        }
    }





    const handleMouseEnter1 = (children: child[]) => {
        setChildren1Show(true)
        setChildrenList(children)
    }

    const handleMouseLeave1 = () => {
        setChildren1Show(false)
    }
    const handleMouseEnter2 = (children: child[]) => {
        setChildren2Show(true)
        setChildrenList(children)
    }

    const handleMouseLeave2 = () => {
        setChildren2Show(false)
    }

    // 跳转购物车页面
    const goCartList = () => {
        Navigate(`/cartList`, {
            replace: false
        })
    }

    useEffect(() => {

        window.addEventListener('scroll', onScroll)
        return () => {
            window.removeEventListener('scroll', onScroll)
        }


    }, [])

    //搜索框
    const [InputSearch, setInputSearch] = useState<string>('')
    // 在组件顶部添加防抖相关代码
    const debounceTimer = useRef<NodeJS.Timeout>();

    // 修改搜索处理函数
    const handleSearch = useRef((value: string) => {
        reqSearch(value).then((res) => {
            console.log('搜索结果', res);
        });
    });

    return (
        <div>

            {/* 吸顶 */}
            <div className={classNames(styles.Nav_Top, { [styles.show]: isShow })} onMouseLeave={handleMouseLeave1} >
                <div className={styles.container} >

                    <ul>
                        <img src={Logo} alt="" style={{ cursor: "pointer" }} onClick={() => {
                            goHome()
                        }} />
                        <li onMouseEnter={() => {
                            setChildren1Show(false)
                        }}
                            onClick={() => {
                                goHome()
                            }}
                        >首页</li>
                        {
                            NavList?.map((item) => {
                                return (

                                    <li key={item.id} onMouseEnter={() => {
                                        handleMouseEnter1(item.children)
                                    }}
                                        onClick={() => {
                                            goCategory(item.id)
                                        }}
                                        style={id === item.id ? {
                                            color: '#27bb9a', fontWeight: 'bold',
                                            transform: 'scale(1.2, 1.2)'
                                        } : {}}
                                    >
                                        {item.name}</li>


                                )
                            })
                        }
                        <div>
                            <Search placeholder="搜一搜" style={{ width: 200 }} />
                        </div>
                        <span onClick={() => {
                            goCartList()
                        }}>
                            <ShoppingCartOutlined className={styles.icon} />
                        </span>
                    </ul>
                </div>
                {/* <div className={classNames(styles.children, { [styles.show]: children1Show })}>
                    <ul>
                        {
                            ChildrenList?.map((child: child) => {
                                return (
                                    <li key={child.id}>
                                        <img src={child.picture} alt="" />
                                        <span>{child.name}</span>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div> */}
            </div>

            <div className={styles.Nav} ref={nav} onMouseLeave={handleMouseLeave2}>
                <div className={styles.container} >

                    <ul >
                        <img src={Logo} alt="" style={{ cursor: "pointer" }} onClick={() => {
                            goHome()
                        }} />
                        <li onMouseEnter={() => {
                            setChildren2Show(false)
                        }}
                            onClick={() => {
                                goHome()
                            }}
                        >首页</li>
                        {
                            NavList?.map((item) => {
                                return (
                                    <li key={item.id} onMouseEnter={() => {
                                        handleMouseEnter2(item.children)
                                    }}
                                        onClick={() => {
                                            goCategory(item.id)
                                        }}
                                        style={id === item.id ? {
                                            color: '#27bb9a', fontWeight: 'bold',
                                            transform: 'scale(1.2, 1.2)'
                                        } : {}}
                                    >{item.name}</li>
                                )
                            })
                        }
                        <div>
                            <Search
                                placeholder="搜一搜"
                                value={InputSearch}
                                style={{ width: 200 }}
                                onChange={(e) => {
                                    setInputSearch(e.target.value);

                                    // 清除之前的定时器
                                    if (debounceTimer.current) {
                                        clearTimeout(debounceTimer.current);
                                    }

                                    // 设置新的防抖定时器（500ms后执行）
                                    debounceTimer.current = setTimeout(() => {
                                        handleSearch.current(e.target.value);
                                    }, 500);
                                }}
                            />

                        </div>
                        <span onClick={() => {
                            goCartList()
                        }}>
                            <ShoppingCartOutlined className={styles.icon} />
                        </span>
                    </ul>
                </div>
                <div className={classNames(styles.children, { [styles.show]: children2Show })}>
                    <ul>
                        {
                            ChildrenList?.map((child: child) => {
                                return (
                                    <li key={child.id} onClick={() => {
                                        goToCategorySub(child.id)
                                    }}>
                                        <img src={child.picture} alt="" />
                                        <span>{child.name}</span>
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
            </div>
        </div>

    )
}


export default Nav